<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form :inline="true"  class="demo-form-inline" :disabled="!disabled">
            <el-form-item label="一级分类">
                <el-select  placeholder="请选择" v-model="(category1Id as number)" @change="category1Change" >
                    <el-option v-for="item in categoryList1" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select  placeholder="请选择" v-model="(category2Id as number)" @change="category2Change" >
                    <el-option v-for="item in categoryList2" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select  placeholder="请选择" v-model="(category3Id as number)">
                    <el-option v-for="item in categoryList3" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>

</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Category",
});
</script>

<script setup lang="ts">
    import useAttrStore from '@/stores/attr'
    import {storeToRefs} from 'pinia'
    import {onMounted} from 'vue'

    const attrStore = useAttrStore()
    //解构出来使用
    const {categoryList1,category1Id,categoryList2,category2Id,categoryList3,category3Id} = storeToRefs(attrStore)

    //接收参数，控制表单禁用
    defineProps<{disabled: boolean}>()
    //初始化获取一级分类
    onMounted(() => {
        attrStore.getCategory1()
    })

    //一级分类列表选中，获取二级分类
    const category1Change = () => {
        //点击一级分类的时候，清除二级和三级分类
        categoryList2.value = []
        categoryList3.value = []
        category2Id.value = null
        category3Id.value = null
        //请求二级分类
        attrStore.getCategory2()
    }

    //二级分类列表选中，获取三级分类
    const category2Change = () => {
        //点击二级分类的时候，清除三级分类
        categoryList3.value = []
        category3Id.value = null
        //请求二级分类
        attrStore.getCategory3()
    }
</script>